<template>
    <div class="main">
        <el-container>
            <el-header>
                <el-menu
                        :default-active="this.$route.path"
                        router mode="horizontal"
                        class="el-menu-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        @select="SelectNav"
                        active-text-color="#ffd04b">
                    <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
                        <template slot="title">
                            <span> {{ item.navItem }}</span>
                        </template>
                    </el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">GIS</template>
                        <el-menu-item index="2-1">THREEJS</el-menu-item>
                        <el-menu-item index="2-2">WEBGL</el-menu-item>
                        <el-menu-item index="2-3">CESIUM</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">算法</template>
                        <el-menu-item index="3-1">数据结构&基础算法</el-menu-item>
                        <el-menu-item index="3-2">计算机视觉</el-menu-item>

                    </el-submenu>
                </el-menu>

            </el-header>
            <el-container>
                <el-aside>
                    <Header ref="header"></Header>
                </el-aside>
                <el-main>
<!--                    导航显示-->
                    <keep-alive>
                        <router-view v-if="$route.meta.isKeep"></router-view>
                    </keep-alive>
                    <router-view v-if="!$route.meta.isKeep"></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import HomePage from "@/components/common/HomePage.vue";
    import Header from "../components/common/home/Header.vue";
    import Write from "../components/common/Write.vue";

    export default {
        name: "Home",
        components: {
            // HomePage,
            Header,
            // Write
        },
        data() {
            return {
                navList: [
                    {name: '/HomePage', navItem: '首页'},
                    {name: '/File', navItem: '归档'},
                    // {name: '/Knowledge', navItem: '资源'},
                    {name: '/Books', navItem: '书籍'},
                    {name: '/Write', navItem: '写文章'},
                    {name: '/PLAY', navItem: '娱乐'},
                    {name: '/About', navItem: '关于'},

                ]
            };
        },
        methods: {
            SelectNav(index) {
                console.log(index);

                if (index == "/HomePage") {
                    this.$store.dispatch('changeHeaderBgState', null)
                }


            }
        }
    };
</script>

<style lang="scss" scoped>
    .main {
        .link {
            height: 40px;

            a {
                width: 10%;
                color: white;
                line-height: 40px;
                font-size: 20px;
                text-decoration: none;
                margin: 20px;

            }

        }
    }

    .el-header,
    .el-footer {
        background-color: #b3c0d1;
        color: #333;
        text-align: center;
        line-height: 60px;
        padding: 0;
    }

    .el-aside {
        background: rgba(220, 220, 220, 0.1);
        color: #333;
        text-align: center;
        line-height: 200px;
        height: 70vh;
        width: 30vw;
        margin-top: 10vh;
    }

    .el-main {
        background-color: #e9eef3;
        color: #333;
        text-align: center;
        // line-height: 160px;


    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
